<template>
  <div class="dashboardConatiner">
    <a-space>
      <a-space direction="vertical">
        <a-space>
          <a-button type="primary">Primary</a-button>
          <a-button>Default</a-button>
          <a-button type="dashed">Dashed</a-button>
          <a-button type="outline">Outline</a-button>
          <a-button type="text">Text</a-button>
        </a-space>
        <a-space>
          <a-button type="primary" status="success">Primary</a-button>
          <a-button status="success">Default</a-button>
          <a-button type="dashed" status="success">Dashed</a-button>
          <a-button type="outline" status="success">Outline</a-button>
          <a-button type="text" status="success">Text</a-button>
        </a-space>
        <a-space>
          <a-button type="primary" status="warning">Primary</a-button>
          <a-button status="warning">Default</a-button>
          <a-button type="dashed" status="warning">Dashed</a-button>
          <a-button type="outline" status="warning">Outline</a-button>
          <a-button type="text" status="warning">Text</a-button>
        </a-space>
        <a-space>
          <a-button type="primary" status="danger">Primary</a-button>
          <a-button status="danger">Default</a-button>
          <a-button type="dashed" status="danger">Dashed</a-button>
          <a-button type="outline" status="danger">Outline</a-button>
          <a-button type="text" status="danger">Text</a-button>
        </a-space>
      </a-space>
    </a-space>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const color = ref("#000000");
const deg = ref(0);
const boxBg = ref("hsl(0, 100%, 50%)");
</script>

<style lang="less" scoped>
.dashboardConatiner {
  padding: 20px;
  background-color: @pageBg;
  .testBlock {
    width: 200px;
    height: 200px;
    background-color: rgb(0, 0, 0);
  }
  .show {
    height: 200px;
    margin-left: 20px;
  }
  .rightView {
    filter: hue-rotate(0deg);
    .logo {
      width: 300px;
    }
    .colorBox {
      width: 200px;
      height: 200px;
      background-color: #ff0000;
    }
  }
}
</style>
